<template>
  <div class="echarts-box" :id="props.id"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
type IEchartsP = {
  id: string;
  noDarkTheme: string;
  option: any;
};
const props = withDefaults(defineProps<IEchartsP>(), { noDarkTheme: "" });
let chart: any;
function onResizeFn() {
  chart.resize();
}
function initChart() {
  chart?.dispose();
  chart = echarts.init(document.getElementById(props.id), props.noDarkTheme);
  chart.setOption(props.option);
  window.addEventListener("resize", onResizeFn);
}
onMounted(() => {
  initChart();
});
onUnmounted(() => {
  chart.dispose();
  window.removeEventListener("resize", onResizeFn);
});
defineExpose({ chart, initChart });
</script>
<style scoped lang="scss">
.echarts-box {
  height: 100%;
  width: 100%;
}
</style>
